<nz-breadcrumb style="margin:12px 0;">
    <nz-breadcrumb-item>系统设置</nz-breadcrumb-item>
    <nz-breadcrumb-item>菜单管理</nz-breadcrumb-item>
</nz-breadcrumb>
<div style="padding:24px; background: #fff; min-height: 100%;">
    <button nz-button [nzType]="'primary'" [nzShape]="'circle'" (click)="showModal()">
        <i class="anticon anticon-plus"></i>
    </button>
    <nz-modal [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
        <ng-template #modalTitle>
            <i class="anticon anticon-edit"></i> {{ isViewStateUpdate ? '更新菜单' : '新增菜单' }}
        </ng-template>
        <ng-template #modalContent>
            <form nz-form [formGroup]="menuForm" (ngSubmit)="submitForm()" [nzType]="'horizontal'">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label>菜单等级</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16">
                        <nz-radio-group formControlName="level" (click)="menuRadioChange(menuForm.value.level)" [nzSize]="'large'">
                            <label nz-radio-button [nzValue]="'1'">
                                <span>一级菜单</span>
                            </label>
                            <label nz-radio-button [nzValue]="'2'">
                                <span>二级菜单</span>
                            </label>
                            <label nz-radio-button [nzValue]="'3'">
                                <span>三级菜单</span>
                            </label>
                        </nz-radio-group>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label>菜单类型</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16">
                        <nz-radio-group formControlName="type">
                            <label nz-radio [nzValue]="'1'">
                                <span>学校端</span>
                            </label>
                            <label nz-radio [nzValue]="'2'">
                                <span>家长端</span>
                            </label>
                        </nz-radio-group>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label>菜单名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16">
                        <nz-input formControlName="name" [nzPlaceHolder]="'菜单名称'" [nzSize]="'large'"></nz-input>
                    </div>
                </div>
                <div nz-form-item nz-row *ngIf="getFormControl('level').value !== '1'">
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label>上级菜单</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16">
                        <nz-select formControlName="upLevel" [nzSize]="'large'">
                            <nz-option *ngFor="let upLevel of upLevels" [nzLabel]="upLevel.name" [nzValue]="upLevel._id">
                            </nz-option>
                        </nz-select>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label>菜单URL</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16">
                        <nz-input formControlName="url" [nzPlaceHolder]="'菜单URL'" [nzSize]="'large'"></nz-input>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label>菜单图标</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16">
                        <nz-input formControlName="icon" [nzPlaceHolder]="'菜单图标'" [nzSize]="'large'"></nz-input>
                    </div>
                </div>
            </form>
        </ng-template>
        <ng-template #modalFooter>
            <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">返 回</button>
            <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="handleOk($event, menuForm.value)" [nzLoading]="isConfirmLoading"
                [disabled]="!menuForm.valid">{{ isViewStateUpdate ? '更 新' : '提 交' }}</button>
        </ng-template>
    </nz-modal>
    <nz-table #nzTable [nzAjaxData]="menuList" [nzShowSizeChanger]="true" [nzLoading]="_loading" [nzTotal]="_total" [(nzPageIndex)]="_current"
        (nzPageIndexChange)="getAllMenus()" [(nzPageSize)]="_pageSize" (nzPageSizeChange)="getAllMenus()">
        <thead nz-thead>
            <tr>
                <th nz-th>
                    <span>菜单名称</span>
                </th>
                <th nz-th>
                    <span>菜单等级</span>
                </th>
                <th nz-th>
                    <span>菜单类型</span>
                </th>
                <th nz-th>
                    <span>菜单图标</span>
                </th>
                <th nz-th>
                    <span>父级菜单</span>
                </th>
                <th nz-th>
                    <span>创建日期</span>
                </th>
                <th nz-th>
                    <span>操作</span>
                </th>
            </tr>
        </thead>
        <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let menu of nzTable.data">
                <td nz-td>{{ menu.name }}</td>
                <td nz-td>
                    <nz-tag [nzColor]="'green'" *ngIf="menu.level === '1'">一级菜单</nz-tag>
                    <nz-tag [nzColor]="'cyan'" *ngIf="menu.level === '2'">二级菜单</nz-tag>
                    <nz-tag [nzColor]="'blue'" *ngIf="menu.level === '3'">三级菜单</nz-tag>
                </td>
                <td nz-td>
                    <nz-tag [nzColor]="'green'" *ngIf="menu.type === '1'">学校端</nz-tag>
                    <nz-tag [nzColor]="'blue'" *ngIf="menu.type === '2'">家长端</nz-tag>
                </td>
                <td nz-td> <i class="anticon anticon-{{ menu.icon }}"></i></td>
                <td nz-td>{{ menu.upLevel ? (menu.upLevel | getParentName: nzTable.data) : '无' }}</td>
                <td nz-td>{{ menu.createDate | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
                <td nz-td>
                    <button nz-button class="ant-btn" [nzType]="'primary'" (click)="showModal(menu._id)">
                        <i class="anticon anticon-edit"></i>
                    </button>
                    <nz-popconfirm [nzTitle]="'确定要删除菜单吗？'" (nzOnConfirm)="del(menu._id)" [nzPlacement]="'topRight'">
                        <button nz-popconfirm nz-button class="ant-btn" [nzType]="'danger'">
                            <i class="anticon anticon-delete"></i>
                        </button>
                    </nz-popconfirm>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>